<template>
  <div class="main" v-if="zfNameflag">
    <div>
      <parklist :getParkDetail="parkChange" :getParkNameMap="getParkName"></parklist>
    </div>
    <div class="energy-head">
      <div style="margin-left: 20px;">
        <span style="color: #333333;font-size: 14px;">年份：</span>
      </div>
      <el-date-picker
        style="width:140px;color:#fff;"
        v-model="selectYear"
        type="year"
        :picker-options="pickerOptions"
        :clearable="false"
        :editable="false"
        value-format="yyyy"
        @change="yearChange"
        placeholder="请选择年份">
      </el-date-picker>
    </div>
    <el-row :gutter="32" style="background: #FFFFFF;margin: 0px 0px 20px 0px;padding: 20px 0px;box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);border: 1px solid #F0F0F0;">
      <el-col :span="12">
        <div class="grid-content">
          <div class="grid-title">全省园区能源已用额度：</div>
          <div style="width: 100%;text-align: center;">
            <span style="font-size: 30px;font-weight: 600;color: #1492FF;">{{usedEnergy}}</span>
            <span style="font-size: 16px;font-weight: 500;color: #979797;">&nbsp;吨标煤</span>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <div class="grid-title">全省园区能源剩余额度：</div>
          <div style="width: 100%;text-align: center;">
            <span style="font-size: 30px;font-weight: 600;color: #1492FF;">{{remainedEnergy}}</span>
            <span style="font-size: 16px;font-weight: 500;color: #979797;">&nbsp;吨标煤</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="yuanqu">
      <div style="display:flex;width: 100%">
        <div style="margin-right: 1.4%;width: 75%">
          <div class="left_baidu" style="overflow: hidden">
            <div id="energy-annular3" style="width:100%;height:640px"></div>
            <div style="position: absolute;left:20px;top: 20px;width: 250px;height: 240px;">
              <div style="width: 100%;height: 35px;background: linear-gradient(180deg, #0885F5 0%, #13BBFB 100%);padding: 5px 10px 5px 10px;">
                <div style="font-size: 15px;font-weight: 600;color: #FFFFFF;line-height: 25px;float: left;">化工产业月度能耗排名</div>
                <el-select
                  class="month-select"
                  style="width: 70px;float: right;background: rgba(255, 255, 255, 0.1);"
                  placeholder="请选择月份"
                  v-model="selectMonth"
                  @change="monthChange">
                  <el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
                  </el-option>
                </el-select>
              </div>
              <div style="width: 100%;height: 135px;background: rgba(255, 255, 255, 0.6);padding: 6px;">
                <div style="width: 100%;height: 100%;background: #FFFFFF;padding: 5px 5px 0px 10px;">
                  <el-table
                    :data="tableData3"
                    max-height="115px"
                    :row-style="{height:'28px'}"
                    :cell-style="{padding:'0px', fontSize: '13px'}"
                    :header-row-style="{height:'28px'}"
                    :header-cell-style="{background:'#F7F8FA', color: '#333333', padding:'0px', fontSize: '13px', fontWeight: 'blod'}"
                    style="width: 100%;">
                    <el-table-column type="index" :index="indexMethod" label="排名"></el-table-column>
                    <el-table-column prop="parkName" label="园区名称">
                      <template scope="scope">
                        <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.parkName)" placement="top-start">
                          <span>{{scope.row.parkName}}</span>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                    <el-table-column prop="energyValue" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="总耗能"></el-table-column>
                    <!-- <el-table-column prop="usedAmount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="同比"></el-table-column> -->
                  </el-table>
                </div>
              </div>
            </div>
            <div style="position: absolute;left:20px;bottom: 20px;width: 250px;height: 180px;">
              <div style="width: 100%;height: 35px;background: linear-gradient(180deg, #0885F5 0%, #13BBFB 100%);padding: 5px 10px 5px 10px;">
                <div style="font-size: 15px;font-weight: 600;color: #FFFFFF;line-height: 25px;">主要产品单耗排名</div>
              </div>
              <div style="width: 100%;height: 150px;background: rgba(255, 255, 255, 0.6);padding: 6px;">
                <div style="width: 100%;height: 100%;background: #FFFFFF;padding: 5px 5px 0px 10px;">
                  <el-table
                    :data="tableData4"
                    max-height="130px"
                    :row-style="{height:'28px'}"
                    :cell-style="{padding:'0px', fontSize: '13px'}"
                    :header-row-style="{height:'28px'}"
                    :header-cell-style="{background:'#F7F8FA', color: '#333333', padding:'0px', fontSize: '13px', fontWeight: 'blod'}"
                    style="width: 100%;">
                    <el-table-column type="index" :index="indexMethod" label="排名"></el-table-column>
                    <el-table-column prop="parkName" label="园区名称" width="65px">
                      <template scope="scope">
                        <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.parkName)" placement="top-start">
                          <span>{{scope.row.parkName}}</span>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column prop="usedAmount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="总产量（吨）"></el-table-column> -->
                    <el-table-column prop="energyValue" :formatter="formatCount" align="center" width="105px" :show-overflow-tooltip="true" label="单位产品耗能（吨标煤/吨）"></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right_all">
          <el-row class="right_top">
            <div style="font-size:18px; margin:20px 20px 10px 20px;color: #333333;font-weight:700;text-align:center;width:150;">化工园区万元产值综合能耗（吨标煤/万元）</div>
            <el-date-picker
              style="width:140px;color:#fff;margin-left: 30px;margin-bottom: 10px;"
              v-model="compareYear"
              type="year"
              :picker-options="pickerOptions2"
              :clearable="false"
              :editable="false"
              value-format="yyyy"
              @change="compareYearChange"
              placeholder="请选择年份">
            </el-date-picker>
            <div id="energy-annular1" style="width: 100%;height:210px;padding:0 25px;"></div>
            <div v-if="topOneShow === 1" style="color: #909399;margin-top: 100px;margin-left: 200px;"> 暂无数据</div>
          </el-row>
          <el-row class="right_center">
            <div style="font-size:18px; margin:20px;color: #333333;font-weight:700;text-align:center;width:150;">化工产业月度能耗（吨标煤）</div>
            <div id="energy-annular5" style="width: 100%;height:240px;padding:0 25px;"></div>
            <!-- <div style="font-size:18px; margin:20px;color: #333333;font-weight:700;text-align:center;width:100%;">化工园区万元能耗增加值（吨标煤/万元）</div>
            <div id="energy-annular2" style="width: 100%;height:240px;padding:0 25px;"></div>
            <div v-if="topTwoShow === 1" style="color: #909399;margin-top: 100px;margin-left: 200px;"> 暂无数据</div> -->
          </el-row>
        </div>
      </div>
    </div>

    <div class="bottom">

      <div class="bottom-first">
        <div class="bottom-title">园区能源用能额度分析</div>
        <div class="bottom-tab">
          <el-row :gutter="30">
            <el-col :span="8">
              <div style="width: 100%;margin-bottom: 45px;" v-for="item in tableData2Green" :key="item.parkName">
                <div style="font-size: 14px;color: #666666;margin-bottom:5px;">{{item.parkName}}</div>
                <div>
                  <div style="width: 150px;height: 20px;background: #EDF4FF;float: left;">
                    <div class="green-grid" :style="{ width: item.percent }">
                      <span style="color: #666666;font-size: 13px;line-height: 20px;">&nbsp;{{item.usedAmount}}</span>
                    </div>
                  </div>
                  <div style="color: #666666;font-size: 14px;line-height: 20px;float: right;">{{item.energyValue}}万吨</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="width: 100%;margin-bottom: 45px;" v-for="item in tableData2Blue" :key="item.parkName">
                <div style="font-size: 14px;color: #666666;margin-bottom:5px;">{{item.parkName}}</div>
                <div>
                  <div style="width: 150px;height: 20px;background: #EDF4FF;float: left;">
                    <div class="blue-grid" :style="{ width: item.percent }">
                      <span style="color: #666666;font-size: 13px;line-height: 20px;">&nbsp;{{item.usedAmount}}</span>
                    </div>
                  </div>
                  <div style="color: #666666;font-size: 14px;line-height: 20px;float: right;">{{item.energyValue}}万吨</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="width: 100%;margin-bottom: 45px;" v-for="item in tableData2Red" :key="item.parkName">
                <div style="font-size: 14px;color: #666666;margin-bottom:5px;">{{item.parkName}}</div>
                <div>
                  <div style="width: 150px;height: 20px;background: #EDF4FF;float: left;">
                    <div class="red-grid" :style="{ width: item.percent }">
                      <span style="color: #666666;font-size: 13px;line-height: 20px;">&nbsp;{{item.usedAmount}}</span>
                    </div>
                  </div>
                  <div style="color: #666666;font-size: 14px;line-height: 20px;float: right;">{{item.energyValue}}万吨</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="bottom-two">
        <div class="bottom-title-two">全省用能趋势图</div>
        <div class="bottom-tab">
          <div id="energy-annular4" style="width: 100%;height:270px;"></div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import parklist from '@/components/parklist'
import dd from 'gdt-jsapi'
const echarts = require('echarts')
export default {
  components: { parklist },
  name: 'energyConsumption',
  data () {
    return {
      usedEnergy: 0, // 全省已用
      remainedEnergy: 0, // 全省剩余
      parkNameMap: new Map(), // 园区全称
      selectYear: '', // 选择年
      selectMonth: '', // 选择月
      compareYear: '',
      monthList: [
        { value: '01', label: '1月', disabled: false },
        { value: '02', label: '2月', disabled: false },
        { value: '03', label: '3月', disabled: false },
        { value: '04', label: '4月', disabled: false },
        { value: '05', label: '5月', disabled: false },
        { value: '06', label: '6月', disabled: false },
        { value: '07', label: '7月', disabled: false },
        { value: '08', label: '8月', disabled: false },
        { value: '09', label: '9月', disabled: false },
        { value: '10', label: '10月', disabled: false },
        { value: '11', label: '11月', disabled: false },
        { value: '12', label: '12月', disabled: false }
      ],
      // energyType: '',
      // energyTypeList: [],
      tableData1: [],
      tableData2: [],
      tableData2Green: [],
      tableData2Blue: [],
      tableData2Red: [],
      tableData3: [],
      tableData4: [],

      topOneShow: 0,
      topTwoShow: 0,
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth(), 0)
        }
      },
      pickerOptions2: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear() - 1, new Date().getMonth(), 0)
        }
      },
      zfNameflag: true,
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      myChart1: {},
      myChart2: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      option1Data: [],
      option1XData: [],
      option2Data: [],
      option2XData: [],
      option3Data: [],
      option3MinData: 0,
      option3MaxData: 1000000,
      option4XData: [],
      option4BarData: [],
      option4LineData: [],
      option5Data: [],
      option5XData: []
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res =>{
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:',res);
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  // 调用
  mounted () {
    this.initDate()
    this.getEnergyConsumption()

    window.onresize = () => {
      this.myChart1.resize()
      this.myChart2.resize()
    }
  },
  methods: {
    getParkName (map) {
      this.parkNameMap = map
    },
    getNameByAbbreviation (key) {
      return this.parkNameMap.get(key)
    },
    // 切换园区
    parkChange (data) {
      sessionStorage.setItem('routeName1', data.coordinateList[0].name)
      this.$router.push({
        name: 'zfParkDetail',
        query: {
          data: data
        }
      })
    },
    initDate () {
      let today = new Date()
      let lastMonth = new Date(today.getFullYear(), today.getMonth(), 0)
      this.selectYear = lastMonth.getFullYear() + ''
      this.compareYear = (lastMonth.getFullYear() - 1) + ''
      this.selectMonth = (lastMonth.getMonth() < 9) ? '0' + (lastMonth.getMonth() + 1) : (lastMonth.getMonth() + 1)
      this.monthList.forEach(item => {
        if (item.value > this.selectMonth) {
          item.disabled = true
        }
      })
    },
    indexMethod (index) {
      return index + 1
    },
    // getEnergyType () {
    //   this.$http
    //     .post(`/home/chemical/energyConsumption/getSysDictByName`, {})
    //     .then(({ data: res }) => {
    //       if (res && res.code === 0) {
    //         this.energyTypeList = res.data
    //         this.energyType = this.energyTypeList[0].code
    //         this.getEnergyConsumption()
    //       } else {
    //         this.$message.warning(res.msg)
    //       }
    //     })
    // },
    yearChange (value) {
      this.selectYear = value
      this.selectMonth = '01'
      if (value === (new Date().getFullYear() + '')) {
        let today = new Date()
        let lastMonth = new Date(today.getFullYear(), today.getMonth(), 0)
        let month = (lastMonth.getMonth() < 9) ? '0' + (lastMonth.getMonth() + 1) : (lastMonth.getMonth() + 1)
        this.monthList.forEach(item => {
          if (item.value > month) {
            item.disabled = true
          }
        })
      } else {
        this.monthList.forEach(item => {
          item.disabled = false
        })
      }
      this.getEnergyConsumption()
    },
    compareYearChange (value) {
      this.compareYear = value
      this.$http
        .post(`/home/chemical/parkInfoGovPage/getEnergyConsumption`,
          {
            year: this.selectYear,
            months: this.selectYear + this.selectMonth,
            compYear: this.compareYear
          })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            // 上一
            if (res.data.compEnergyConsums.name) {
              this.option1Data = res.data.compEnergyConsums.value
              this.option1XData = res.data.compEnergyConsums.name
              this.topOneShow = 0
            } else {
              this.option1Data = []
              this.option1XData = []
              this.topOneShow = 1
            }
            this.renderMyChart1()
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    /* energyTypeChange (value) {
      this.energyType = value
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovYearConsumsPark`,
          {
            energyCode: this.energyType,
            year: this.selectYear
          })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.tableData1 = res.data
          } else {
            this.$message.warning(res.msg)
          }
        })
    }, */
    monthChange (value) {
      this.selectMonth = value
      this.$http
        .post(`/home/chemical/parkInfoGovPage/getEmsGovMonthConsums`,
          {
            months: this.selectYear + this.selectMonth
          })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.tableData3 = res.data
            this.option5Data = this.tableData3.map(item =>{
              return item.energyValue
            })
            this.option5XData = this.tableData3.map(item =>{
              return item.parkName
            })
            this.renderMyChart5()
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    formatCount (row, column, cellValue, index) {
      if (cellValue && cellValue !== '') {
        return cellValue
      } else {
        return '—'
      }
    },
    // proportionFormatCount (row, column, cellValue, index) {
    //   if (cellValue && cellValue !== '') {
    //     return cellValue + '%'
    //   } else {
    //     return '—'
    //   }
    // },
    getEnergyConsumption () {
      this.$http
        .post(`/home/chemical/parkInfoGovPage/getEnergyConsumption`,
          {
            year: this.selectYear,
            months: this.selectYear + this.selectMonth,
            compYear: this.compareYear
          })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.usedEnergy = res.data.usedEnergy
            this.remainedEnergy = res.data.remainedEnergy.replace('-', '超出')
            // 上一
            if (res.data.compEnergyConsums.name) {
              this.option1Data = res.data.compEnergyConsums.value
              this.option1XData = res.data.compEnergyConsums.name
              this.topOneShow = 0
            } else {
              this.option1Data = []
              this.option1XData = []
              this.topOneShow = 1
            }

            this.tableData1 = res.data.emsGovYearConsums
            this.tableData2 = res.data.emsGovEnergyQuotasList.map(item => {
              let usedQuota = Number(item.usedAmount)
              let totalQuota = Number(item.energyValue)
              let percent = 0
              if (totalQuota !== 0) {
                percent = parseInt(usedQuota / totalQuota * 100)
                if (percent > 100) {
                  percent = 100
                }
              }
              return {
                parkName: item.parkName,
                usedAmount: parseInt(usedQuota),
                energyValue: parseInt(totalQuota / 10000),
                percent: percent + '%'
              }
            })
            this.tableData2Green = this.tableData2.slice(0, 4)
            this.tableData2Blue = this.tableData2.slice(4, 8)
            this.tableData2Red = this.tableData2.slice(8, 12)
            this.tableData3 = res.data.emsGovMonthConsums
            this.tableData4 = res.data.emsGovProductConsumsList

            // 上三
            // if (res.data.emsGovIndustryConsums.name) {
            //   this.option2Data = res.data.emsGovIndustryConsums.value
            //   this.option2XData = res.data.emsGovIndustryConsums.name
            //   this.topTwoShow = 0
            // } else {
            //   this.option2Data = []
            //   this.option2XData = []
            //   this.topTwoShow = 1
            // }

            this.option3Data = res.data.emsGovYearConsums

            this.option3MinData = this.option3Data.reduce((num1, num2) => {
              return num1.value >= num2.value ? num2 : num1
            }).value

            this.option3MaxData = this.option3Data.reduce((num1, num2) => {
              return num1.value >= num2.value ? num1 : num2
            }).value

            this.option4XData = res.data.yearEmsGovEnergyConsums.name
            this.option4BarData = res.data.yearEmsGovEnergyConsums.thisYearValue
            this.option4LineData = res.data.yearEmsGovEnergyConsums.lastYearValue

            this.option5Data = this.tableData3.map(item =>{
              return item.energyValue
            })
            this.option5XData = this.tableData3.map(item =>{
              return item.parkName
            })
            this.renderMyChart1()
            // this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()
            this.renderMyChart5()
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('energy-annular1'))

      this.option1 = {
        color: ['#2690F3'],
        grid: {
          top: '5%',
          bottom: '15%'
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 4,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        yAxis: {
          show: true,
          min: 0
        },
        xAxis: {
          show: true,
          type: 'category',
          axisLine: true,
          data: this.option1XData,
          axisLabel: {
            interval: 0,
            width: 60,
            overflow: 'break'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            data: this.option1Data,
            type: 'bar',
            min: 0,
            barWidth: '20px',
            backgroundStyle: {
              color: 'rgba(207, 207, 207, 1)'
            },
            label: {
              show: true,
              position: 'top',
              valueAnimation: true,
              formatter: '{c}'
            }
          }
        ]
      }

      this.myChart1.setOption(this.option1)
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('energy-annular2'))

      this.option2 = {
        color: ['#2690F3'],
        grid: {
          top: '3%',
          bottom: '15%'
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 4,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        yAxis: {
          show: true,
          min: 0
        },
        xAxis: {
          show: true,
          type: 'category',
          axisLine: true,
          data: this.option2XData,
          axisLabel: {
            interval: 0,
            width: 60,
            overflow: 'break'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            data: this.option2Data,
            type: 'bar',
            min: 0,
            barWidth: '20px',
            backgroundStyle: {
              color: 'rgba(207, 207, 207, 1)'
            },
            label: {
              show: true,
              position: 'top',
              valueAnimation: true,
              formatter: '{c}'
            }
          }
        ]
      }

      this.myChart2.setOption(this.option2)
    },
    renderMyChart3 () {
      let geoJson = require('./zhejiang.json')
      this.myChart3 = echarts.init(document.getElementById('energy-annular3'))
      // this.myChart3.showLoading()
      // this.myChart3.hideLoading()

      echarts.registerMap('zhejiang', geoJson)
      this.option3 = {
        backgroundColor: '#013954',
        tooltip: {
          trigger: 'item',
          formatter: (item) => {
            let parkData = ''
            if (item.data.park) {
              item.data.park.forEach(park => {
                parkData += park.name + ':  ' + park.value + '<br>'
              })
            }
            return parkData
          }
        },
        visualMap: {
          type: 'continuous',
          orient: 'vertical',
          text: ['High', 'Low'],
          showLabel: true,
          seriesIndex: [0],
          min: this.option3MinData,
          max: this.option3MaxData,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          },
          textStyle: {
            color: '#ffffff'
          },
          bottom: 10,
          right: 10
        },
        series: [
          {
            name: '浙江省化工园区能源消耗',
            type: 'map',
            mapType: 'zhejiang', // 自定义扩展图表类型
            label: {
              show: true,
              color: '#fff'
            },
            left: '26%',
            map: 'zhejiang',
            // center: [104.114129, 37.550339],//当前视角的中心点
            zoom: 1, // 当前视角的缩放比例
            roam: true, // 是否开启平游或缩放
            scaleLimit: { // 滚轮缩放的极限控制
              min: 1,
              max: 2
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                color: '#ffffff'
              }
            },
            select: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                color: '#ffffff'
              }
            },
            data: this.option3Data
          }
        ]
      }
      this.myChart3.setOption(this.option3)

      this.myChart3.on('click', () => {
        this.myChart3.dispatchAction({
          type: 'brush',
          areas: []
        })
      })

      this.myChart3.on('mouseover', () => {
        this.myChart3.dispatchAction({
          type: 'downplay'
        })
      })
    },
    renderMyChart4 () {
      this.myChart4 = echarts.init(document.getElementById('energy-annular4'))

      this.option4 = {
        backgroundColor: '#FFF',
        legend: {
          type: 'scroll',
          top: '1%',
          left: '1%'
        },
        grid: {
          left: '1%',
          right: '1%',
          top: '20%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        left: 'center',
        top: '11px',
        xAxis: [
          {
            type: 'category',
            data: this.option4XData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            name: 'tce',
            type: 'value',
            minInterval: 1
          },
          // {
          //   type: 'value'
          // },
          {
            axisLabel: {
              show: false
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '今年用能',
            type: 'bar',
            barWidth: 20,
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#1492FF'
            },
            data: this.option4BarData
          },
          {
            name: '去年用能',
            type: 'line',
            yAxisIndex: 1,
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#FA9358'
            },
            data: this.option4LineData
          }
        ]
      }

      this.myChart4.setOption(this.option4)
    },
    renderMyChart5 () {
      this.myChart5 = echarts.init(document.getElementById('energy-annular5'))

      this.option5 = {
        color: ['#2690F3'],
        grid: {
          top: '10%',
          bottom: '15%'
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 4,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        yAxis: {
          show: true,
          min: 0
        },
        xAxis: {
          show: true,
          type: 'category',
          axisLine: true,
          data: this.option5XData,
          axisLabel: {
            interval: 0,
            width: 60,
            overflow: 'break'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            data: this.option5Data,
            type: 'bar',
            min: 0,
            barWidth: '20px',
            backgroundStyle: {
              color: 'rgba(207, 207, 207, 1)'
            },
            label: {
              show: true,
              position: 'top',
              valueAnimation: true,
              formatter: '{c}'
            }
          }
        ]
      }

      this.myChart5.setOption(this.option5)
    },
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  padding: 20px 20px 40px 20px;
}
.bottom-tab {
  width: 100%;
  padding: 0px 30px 10px 30px;
}
.bottom {
  width: 100%;
  display: flex;
  .bottom-first {
    width: 52.4%;
    height: 340px;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    .bottom-title {
      height: 78px;
      line-height: 58px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  }
  .bottom-two {
    width: 46.2%;
    height: 340px;
    margin-left: 1.4%;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    .bottom-title-two {
      height: 58px;
      line-height: 58px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  }
}
/deep/ .el-input__inner {
  height: 34px;
  line-height: 34px;
  background-color: transparent;
}
/deep/ .el-input__icon {
  line-height: 34px;
}
.month-select /deep/ .el-input__inner {
  color: #ffffff !important;
  height: 25px;
  line-height: 25px;
  font-size: 13px;
}
.month-select /deep/ .el-input__icon {
  line-height: 20px;
}
.el-table /deep/ .cell {
  padding-left: 5px;
  padding-right: 5px;
}
.energy-head {
  background: #FFFFFF;
  height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid #F0F0F0;
  box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background: #F6F9FF;
  border: 1px solid #EDF4FF;
  height: 104px;
}
.grid-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin-left:14px;
  margin-top:14px;
}
.green-grid {
  height: 20px;
  background: linear-gradient(to right, #33D3BF 0%, #17A88B 99%);
  border-radius: 0px 100px 100px 0px;
}
.blue-grid {
  height: 20px;
  background: linear-gradient(to right, #13BBFB 0%, #0885F5 99%);
  border-radius: 0px 100px 100px 0px;
}
.red-grid {
  height: 20px;
  background: linear-gradient(to right, #FE7874 0%, #FF525A 99%);
  border-radius: 0px 100px 100px 0px;
}
.yuanqu {
  margin-top: 20px;
  width: 100%;
  .left_baidu {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    height: 640px;
    width: 100%;
  }
  .right_all {
    height: 640px;
    width: 48%;
    margin-bottom: 20px;
    .right_top {
      height: 310px;
      width: 100%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }
    .right_center {
      height: 310px;
      width: 100%;
      margin: 20px 0px 0px 0px;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }
  }
}
</style>
